import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import PaymentMethod from 'beta/pages/thjonustur/[serviceId]/stillingar/containers/PaymentMethod';
import { IContext } from 'beta/typings/context';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';

const COLOR = 'orange';

const Greidslumati = () => {
  const { t } = useTranslation(['alltSaman']);
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const contractId = router.query.contractId ?? '';

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('alltSaman.changePaymentMethod')}
      icon="wallet"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('alltSaman.infoAnd')}
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/alltsaman/spurningar" target="__blank">
              {''} {t('alltSaman.questions')}
            </a>
          </Text>
        </Box>
      }
    >
      <PaymentMethod color={COLOR} contractId={contractId.toString()} />
    </StepWrapper>
  );
};

Greidslumati.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: [],
  };
};

export default inject('steps')(observer(Greidslumati));